<template>
  <div class="character-wrap">
    <div class="username">{{ username }}</div>
    <div class="max-hp">
      <div class="current-hp" :style="{ width: CHPP + '%' }"></div>
      <span class="text-hp">{{ CHPV }}/{{ HPV }}({{ CHPP }}%)</span>
    </div>
    <img
      class="character"
      :draggable="false"
      :src="`${$imgCatelog.character[sexV][characterV]}`"
      :alt="`角色${sexV}${characterV}`"
    />
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from "vue";
import { useStore } from "@/store";
const store = useStore();
import { sexType } from "@/const/character";
export default defineComponent({
  setup(props, ctx) {
    const { sex, characterIndex } = store.state.userInfo;
    const characterV = ref(characterIndex);
    const sexV = ref(sexType[sex]);
    //最大生命值
    const HPV = computed(() => {
      return store.getters.playerBattleProperty.HP;
    });
    //当前生命值
    const CHPV = computed(() => {
      return store.getters.userPropertyCHP;
    });
    //当前生命值比率
    const CHPP = computed(() => {
      let P = Math.ceil((CHPV.value / HPV.value) * 100);
      if (P < 0) {
        P = 0;
      } else if (P > 100) {
        P = 100;
      }
      if (P <= 40) {
        ctx.emit("handledanger", true);
      } else {
        ctx.emit("handledanger", false);
      }
      return P;
    });
    const username = ref(store.state.userInfo.userName);
    return {
      characterV,
      sexV,
      HPV,
      CHPV,
      CHPP,
      username
    };
  }
});
</script>
<style lang="scss" scoped>
.character-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: upDownDong20Px 5s infinite;
  .character {
    height: 60%;
    object-fit: contain;
  }
  .username {
    color: $--color-white;
    text-shadow: 0 0 5px $--color-black-half-quarter;
    margin-bottom: 10px;
    // animation: upDownDong20Px 5s infinite;
  }
  .max-hp {
    // animation: upDownDong20Px 5s infinite;
    width: 60%;
    height: 30px;
    border: 2px solid $--color-black;
    border-radius: $--border-radius;
    background: $--color-black-quarter;
    overflow: hidden;
    position: relative;
    .current-hp {
      height: 100%;
      background-image: linear-gradient(180deg, #fc0404, #872520);
      transition: width 0.5s ease;
    }
    .text-hp {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      text-align: center;
      line-height: 30px;
      color: $--color-white;
    }
  }
}
</style>
